<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex1</title>
</head>

<body>
    <!-- 第一个 -->
    <div class="wrapper1">
        <div class="left">
            <div class="top"></div>
            <div class="bottom"></div>
        </div>
        <div class="right"></div>
    </div> <br>
    <!-- 第二个 -->
    <div class="wrapper2">
        <header>头部</header>
        <div class="box">
            <p style="background-color: white;color:black">123</p>
            123 <br>
            123 <br>
            123 <br>
            123 <br>
            123 <br>
            123 <br>
            123 <br>
            123 <br>
            123 <br>
            <p style="background-color: white;color:black">123</p>
        </div>
        <footer>尾部</footer>
        </footer>
    </div>

    <!-- 第三个 -->
    <div class="wrapper3">
        <div class="box1">
            <header class="header">
                <div class="hbox1"></div>
                <div class="hbox2"></div>
            </header>
            <div class="body">
                <div class="left"></div>
                <div class="cen"></div>
                <div class="right"></div>
            </div>
            <footer></footer>
        </div>
    </div>

</body>
<style>
    * {
        box-sizing: border-box;
    }

    /* 第三个 */
    .wrapper3 {
        width: 100%;
        padding: 10px;
        height: 600px;
        display: flex;
        justify-content: center;
    }

    .wrapper3 .box1 {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
    }

    .wrapper3 .box1 .header {
        width: 100%;
        height: 70px;
        background-color: aquamarine;
        display: flex;
        justify-content: flex-start
    }

    .wrapper3 .box1 .header .hbox1 {
        width: 70px;
        height: 100%;
        background-color: blue;
    }

    .wrapper3 .body {
        height: 100%;
        flex: 1;
        width: 100%;
        background-color: rgb(145, 19, 19);
        display: flex;
        justify-content: space-between;
    }
    .wrapper3 .body .left{
        width: 40%;
        height: 100%;
        background-color: rgb(51, 157, 13);
    }
    .wrapper3 .body .cen{
        width: 40%;
        height: 100%;
        background-color: rgb(37, 46, 226);
    }
    .wrapper3 .body .right{
        width: 20%;
        height: 100%;
    }
    .wrapper3 footer {
        width: 100%;
        height: 70px;
        background-color: rgb(78, 226, 37);
    }




    /* 第二个 */
    .wrapper2 {
        width: 300px;
        height: 300px;
        overflow: hidden;
        background-color: rgb(12, 180, 180);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        color: white;
    }

    .wrapper2 header {
        width: 100%;
        height: 50px;
        flex-shrink: 1;
        background-color: rgba(28, 67, 173, 0.86);
    }

    .wrapper2 .box {
        flex: 1;
        height: 100%;
        overflow: auto;
    }

    .wrapper2 footer {
        width: 100%;
        height: 50px;
        background-color: rgba(103, 35, 167, 0.86);
        flex-shrink: 1;
    }

    /* 第一个 */
    .wrapper1 {
        width: 300px;
        height: 300px;
        background-color: rgb(12, 180, 180);
        display: flex;
    }

    .wrapper1 .left {
        width: 50%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .wrapper1 .top {
        height: 50%;
        background-color: rgba(102, 36, 163, 0.765);
    }

    .wrapper1 .bottom {
        height: 50%;
        background-color: rgba(23, 107, 167, 0.765);
    }

    /* 第二种 */
</style>

</html>